<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="../css/footer.css"/>
		<style type="text/css">
			
			body {
				background: white;
				overflow: hidden;
				/*background: url(../images/bj.png) no-repeat;
				background-size: 100% 100%;*/
				/*height: 100vh;*/
			}
			
			
			
			.person_lis li {
				border-bottom: 1px solid darkgray;
				padding: .4rem .8rem;
				/*font-size: .8rem;*/
			}
			
			.person_lis li div {
				/*font-size: .7rem;*/
			}
			
			.person_lis li:first-child img {
				width: 4rem;
				height: 4rem;
				vertical-align: middle;
			}
			
			.person_lis li img {
				width: 2rem;
				vertical-align: middle;
			}
			
			.person_lis li:first-child {
				display: flex;
				/*flex-direction: row;*/
				/*justify-content: space-around;*/
			}
			
			.person_lis b {
				color: red;
			}
			
			.user {
				display: inline-block;
				display: flex;
				flex-direction: column;
				margin: 0 .2rem;
				/*font-size: .7rem;*/
			}
			
			.goMoney {
				margin-top: 1.8rem;
				width: 4rem;
				height: 1.5rem;
				color: white;
				/*font-size: .8rem;*/
				text-align: center;
				line-height: 1.5rem;
				background: url(../images/personCent/red.png);
				background-size: 100% 100%;
			}
			
			.user_id,
			.user_level {
				background: url(../images/personCent/blue.png);
				background-size: 100% 100%;
				color: white;
				padding: .2rem;
				margin-top: .2rem;
				width: 5rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.person_lis {
				font-size: .7rem;
			}
			
			.person_lis .someMoney div {
				margin-top: .3rem;
				width: 4rem;
				height: 1.5rem;
				background: url(../images/personCent/red.png);
				background-size: 100% 100%;
				text-align: center;
				color: white;
				line-height: 1.5rem;
				float: right;
			}
			/*...*/
			
			.tubiao {
				overflow: hidden;
			}
			
			.tubiao li {
				float: left;
				width: 32.9%;
				text-align: center;
				background: white;
				font-size: .7rem;
				padding: 5vw 0;
				border-bottom: 2px solid #b6b2b6;
			}
			
			.tubiao img {
				width: 1.5rem;
				height: 1.5rem;
			}
			
			.t_two,
			.t_one {
				border-right: 2px solid #b6b2b6;
			}
			/*提现弹出框*/
			
			.cellMoney {
				width: 70%;
				top: 25%;
				left: 15%;
				text-align: center;
				font-size: .7rem;
				background: white;
				border-radius: .2rem;
				position: absolute;
				border: 1px solid darkgray;
			}
			
			.gotoMoney img,
			.cellMoney img {
				width: 2.5rem;
			}
			
			.gotoMoney input {
				outline: none;
				border: 1px solid gray;
				height: 1.2rem;
				border-radius: .2rem;
				padding-left: .2rem;
				width: 70%;
			}
			
			.gotoMoney .gotoImgs,
			.cellMoney .gotoImgs {
				margin-top: 1rem;
			}
			
			.gotoMoney,
			.cellMoney {
				display: none;
			}
			
			.cellMoney ul {
				padding: .2rem 10%;
				/*margin-top: 1rem;*/
			}
			
			.cellMoney li {
				margin: .2rem 0;
			}
			
			.cellMoney input[type=text] {
				width: 70%;
				outline: none;
				border: 1px solid gray;
				height: 1.2rem;
				border-radius: .2rem;
				padding-left: .2rem;
			}
			
			.orange {
				background: #d47805;
				height: 2rem;
				border-top-left-radius: .2rem;
				border-top-right-radius: .2rem;
				line-height: 2rem;
				text-align: left;
				padding-left: .5rem;
				color: white;
			}
			
			.gotoP {
				color: #d47805;
				text-align: left;
				margin-left: .6rem;
				font-size: .6rem;
				margin-top: .5rem;
				margin-bottom: 4%;
			}
			
			.cellP {
				color: #d47805;
				text-align: left;
				margin-left: .6rem;
				font-size: .6rem;
			}
			
			.mt-5 {
				margin-top: .5rem;
			}
		</style>
	</head>

	<body>
		<ul class="person_lis">
			<li>
				<img style="margin-right: 1rem" src="../images/personCent/toux.png" alt="">
				<div class="user">
					<span>微信名</span>
					<div class="user_id">我的ID：13297</div>
					<div class="user_level">等级：玩家asdsfadsafds</div>
				</div>
			</li>
			<li class="someMoney">
				<img src="../images/personCent/someMoney.png" alt="">
				<span>个人积分:<b> 0</b></span>
				<div class="moneyDayOne">立即提现</div>
			</li>
		</ul>

		<!-- 菜单列表 -->
		<ul class="tubiao">
			<li class="t_one">
				<img src="../images/personCent/jilu.png" alt=""> <br>
				<span>提现记录</span>
			</li>
			<li class="t_two">
				<img src="../images/personCent/kefu.png" alt=""> <br>
				<span>联系客服</span>
			</li>
			<li class="t_three">
				<img src="../images/personCent/ewm.png" alt=""> <br>
				<span>我的推广二维码</span>
			</li>
			<li class="t_one">
				<img src="../images/personCent/xiaxian.png" alt=""> <br>
				<span>我的下线</span>
			</li>
			<li class="t_two">
				<img src="../images/personCent/jiangli.png" alt=""> <br>
				<span>我的奖励</span>
			</li>
			<li class="t_three">
				<img src="../images/personCent/tuijian.png" alt=""> <br>
				<span>推荐玩家</span>
			</li>
			<li class="t_one">
				<img src="../images/personCent/yazhu.png" alt=""> <br>
				<span>下注记录查询</span>
			</li>
		</ul>
		<!-- 提现弹出框 -->
		<div class="cellMoney">
			<div class="orange">
				游戏提现：
			</div>
			<p class="cellP mt-5">*最低提现金额为30元</p>
			<p class="cellP">*最高提现金额为1000元</p>
			<ul>
				<li>
					<span style="float: left;">账号类型：</span> <br>
					<div style="float: right;overflow: hidden;padding: .2rem 0;">
						<label for="male">微信</label>
						<input class="aaa" value="a" style="margin-right: .6rem" type="radio" name="sex" />
						<label for="female">支付宝</label>
						<input class="aaa" value="b" type="radio" name="sex" />
					</div>
				</li>
				<li style="clear: both;">
					<span>账号：</span>
					<input type="text">
				</li>
				<li>
					<span>金额：</span>
					<input type="text">
				</li>
				<li>
					<span>备注：</span>
					<input type="text">
				</li>
			</ul>
			<div class="gotoImgs">
				<img class="go" src="../images/personCent/2.png" alt="">
				<img class="cancel" src="../images/personCent/1.png" alt="">
			</div>
		</div>
		<footer>
			<ul id="footer">
				<li>
					<a href="../index.html">抢红包</a>
				</li>
				<li>
					<a href="agency.html">代理</a>
				</li>
				<li>
					<a href="server.html">客服</a>
				</li>
				<li>
					<a href="center.html">我的</a>
				</li>
			</ul>
		</footer>
	</body>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script>
		!(function(doc, win) {
			var docEle = doc.documentElement,
				evt = "onorientationchange" in window ? "orientationchange" : "resize",
				fn = function() {
					var width = docEle.clientWidth;
					width && (docEle.style.fontSize = 20 * (width / 375) + "px");
				};
			win.addEventListener(evt, fn, false);
			doc.addEventListener("DOMContentLoaded", fn, false);
		}(document, window));
		localStorage.setItem('num', 'personalCente');
		// 提现事件
		var moneyDayOne = document.getElementsByClassName('moneyDayOne')[0];

		var cellMoney = document.getElementsByClassName('cellMoney')[0];

		// 提现
		moneyDayOne.onclick = function() {
			cellMoney.style.display = 'block';
		}

		var cancel = document.getElementsByClassName('cancel');
		var go = document.getElementsByClassName('go');
		for(var i = 0; i < cancel.length; i++) {
			cancel[i].onclick = function() {
				cellMoney.style.display = 'none';
			}
		}
	</script>

</html>